import './StudentExamCheckPage.scss'
import { localGetTestCheckAPI } from '@/apis/student';
import { useNavigate } from 'react-router-dom';
import { DoubleLeftOutlined } from '@ant-design/icons';
import { ConfigProvider, Empty } from 'antd';
import Form from 'antd/es/form/Form';
import { useEffect, useState } from 'react';
import CheckItem from './components/CheckItem/CheckItem';
import { useSelector, useDispatch } from 'react-redux';
import { fetchGetTestCheck } from '@/store/modules/student';


export default function StudentExamCheckPage() {

    const [checkList, setCheckList] = useState([]);
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const { user_status } = useSelector(state => state.user);
    const { testCheck } = useSelector(state => state.student);

    const handleBackClick = function () {
        navigate('/studentcourse/test');
    }


    useEffect(() => {
        console.log(testCheck);
    }, [testCheck])

    useEffect(() => {

        async function getCheckList() {

            await dispatch(fetchGetTestCheck({
                class_id: user_status.class_id,
                partid: user_status.partid
            }, user_status.token));

            const res = await localGetTestCheckAPI();
            for (let i = 0; i < res.data.length; i++) {
                res.data[i].key = i;
            }


            setCheckList(res.data);
        }

        getCheckList();

    }, []);



    return (
        <div className='StudentExamCheckPage'>
            <header>
                <button onClick={handleBackClick}> <DoubleLeftOutlined /> 返回</button>
                <h1>第{user_status.partid}章单元测试错题集</h1>
            </header>
            <ConfigProvider
                theme={{
                    token: {
                        // Seed Token，影响范围大
                        colorPrimary: '#2486b9',
                        borderRadius: 5,

                        // 派生变量，影响范围小
                        // colorBgContainer: '#f6ffed',
                    },
                }}
            >
                {
                    testCheck.length !== 0 && (
                        testCheck[0].success ?
                            <Form
                                className='check-form'
                                layout='vertical'
                                disabled={true}
                            >
                                {testCheck.map((ele, index) => <CheckItem key={index} info={ele} />)}
                            </Form>
                            : <Empty
                                className='empty'
                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                description={
                                    <span>
                                        尚无错题
                                    </span>
                                }
                            />
                    )
                }


            </ConfigProvider>
        </div>
    )
}